import React, { Component } from 'react'
import {Grid, List, } from 'antd-mobile'

import PropTypes from 'prop-types'

export default class headerSelector extends Component {
  constructor(props){
    super(props)
    this.gridList = []
    for (let i = 0; i < 20; i++) {
      this.gridList.push({
        text: '头像' + (i + 1),
        icon: require(`../../assets/headers/头像${i+1}.png`)
      })
      
    }
  }

  state = {
    icon: null  //图片对象
  }

  static propTypes = {
    setHeader: PropTypes.func.isRequired
  }

  handleClick = ({text, icon}) => {
    // 更新当前组件状态
    this.setState({icon})

    // 调用父组件更新状态
    this.props.setHeader(text)
  }

  render() {
    const {icon} = this.state
    const listheader = !icon ? '请选择头像' : (
      <div>
        已选择头像: <img src={icon} alt=""/>
      </div>
    )
    return (
      <List renderHeader={() => listheader}>
        <Grid data={this.gridList} columnNum={5} onClick={this.handleClick}/>
      </List>
    )
  }
}
